<template>
  <div class="vbestui-tool-tip" @mouseenter="tooltipMouseEnter" @mouseleave="tooltipMouseLeave">
    <div class="vbestui-tootip-group" @click="handleClick" @mousedown="TooltipFocus">
      <slot></slot>
    </div>
    <transition name="tooltip-fade">
      <div
        v-show="always?true:isShow"
        class="vbestui-bubble"
        :class="[`vbestui-bubble-theme-${theme}`,
            `vbestui-bubble-placement-${placement}`]"
        :style="{width:maxLength}"
      >
        <div class="vbestui-triangle" :class="[`vbestui-triangle-${placement}`]">
          <div
            class="vbestui-triangle-item"
            v-if="theme=='light'"
            :class="[`vbestui-triangle-item-${placement}`]"
          ></div>
        </div>
        <div class="vbestui-bubble-content">
          <slot name="content"></slot>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import { oneOf } from "utils/index.js";
export default {
  name: "BTooltip",
  props: {
    theme: {
      validator(value) {
        return oneOf(value, ["dark", "light"]);
      },
      default: "dark",
    },
    trigger: {
      validator(value) {
        return oneOf(value, ["hover", "click", "focus"]);
      },
      default: "hover",
    },
    placement: {
      validator(value) {
        return oneOf(value, [
          "top",
          "top-start",
          "top-end",
          "bottom",
          "bottom-start",
          "bottom-end",
          "left",
          "left-start",
          "left-end",
          "right",
          "right-start",
          "right-end",
        ]);
      },
      default: "bottom",
    },
    delay: {
      type: [Number, String],
      default: 0,
    },
    maxLength: {
      type: String,
      default: "",
    },
    always: {
      //是否总是可见的
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isShow: false,
      timer: null,
      delayTimer: null,
    };
  },
  methods: {
    TooltipFocus(e) {
      if (this.always || this.trigger != "focus") return;
      /**对点击的标签进行判断 */
      if (e.target.tagName == "INPUT") this.show();
    },
    /**点击触发 */
    handleClick() {
      if (this.always) return;
      if (this.trigger != "click") return;
      if (this.timer) {
        clearTimeout(this.timer);
      }
      if (this.delayTimer) clearTimeout(this.delayTimer);
      this.show();
    },
    /**hover触发 */
    tooltipMouseEnter() {
      if (this.always) return;
      if (this.trigger != "hover") return;
      if (this.timer) {
        clearTimeout(this.timer);
      }
      if (this.delayTimer) clearTimeout(this.delayTimer);
      this.show();
    },
    /**离开隐藏 */
    tooltipMouseLeave() {
      if (this.always) return;
      /**进入先清除timeout，防止出现多个timeout */
      if (this.timer) clearTimeout(this.timer);
      /**延迟关闭 */
      this.delayTimer = setTimeout(() => {
        this.isShow = false;
        this.$emit("hidden");
      }, 150);
    },
    /**显示提示 */
    show() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      if (this.delayTimer) clearTimeout(this.delayTimer);
      this.timer = setTimeout(() => {
        this.isShow = true;
        this.$emit("show");
      }, this.delay * 1000);
    },
  },
};
</script>